import Vue from "vue"
import axios from "axios"
import BScroll from 'better-scroll'

import Header from '@/components/Header'
import Banner from '@/components/Banner'
import Nav from '@/components/Nav'
import Foodlist from '@/components/Foodlist'

	
	export default {
		name:"index",
		components:{
	    	'Headerm':Header,   	    	
	    	'Bannerm':Banner,   	    	
	    	'Navm':Nav ,  	    	
	    	'Foodlistm':Foodlist ,  	    	
	    	  	    	
	   },
	   data(){
	    	return{
	    		ok:false,	    		
	    		bannerimgs:[
		    		{imgurl:'/static/images/banner1.jpg'},
		    		{imgurl:'/static/images/banner2.jpg'},
		    		{imgurl:'/static/images/banner3.png'},
	    		],
	    		foodfls: [],
				foods:[],
			  	listHeight: [],
     		    foodsScrollY:0,
     		    number:5,
     		    cartlistshow:false,
     		    cartfoods:[localStorage.cartfood],
     		    
	    	}
	   },
	   created() {
		    axios.get('static/test.json').then((res) => {
		      this.foodfls = res.data;		      
		      this.$nextTick(() => {		       
		        this._calculateHeight();		        // 初始化列表高度列表
		      })
		    });
		    
		    axios.get('http://192.168.1.198/api/dishesList').then((res) => {
		      this.foods = res.data;
		      console.log(this.foods)
		    });			   
		    window.addEventListener('scroll', this.menu);
	   },
	   computed: {
	    menuCurrentIndex() {
	      for (let i = 0, l = this.listHeight.length; i < l; i++) {
		        let topHeight = this.listHeight[i]
		        let bottomHeight = this.listHeight[i + 1]
//		        console.log(topHeight);
//		        console.log(bottomHeight);
//		        console.log(i);		       
		        if (!bottomHeight || (this.foodsScrollY >= topHeight && this.foodsScrollY < bottomHeight)) {
		          return i
		           console.log(i);
		           
		        }
		      }
	     
		      return 0
		    },
	   },
	   mounted(){  		
	       console.log(this.cartfoods);
	   },
	   methods: {
	    	foodflshow: function (){//菜品分类显示 
				this.ok=true;
				
				
	    	},	
	    	foodflhide: function (){ 
				this.ok=false;
	    	},
		    menu() {// 监控滚动事件
		      	this.foodsScrollY =document.body.scrollTop;
		      	
		     },
		    _calculateHeight() {
				 let foodList = this.$refs.foodsWrapper.querySelectorAll('.foodlist')
			      let height = 0
			      this.listHeight.push(height)
			      for (let i = 0, l = foodList.length; i < l; i++) {
			        let item = foodList[i]
			        height += item.clientHeight
			        this.listHeight.push(height)
			      }
		    },
	    	
	    	flname: function (index, event,foodfl){ 
	    		console.log(foodfl.id + "---->" +foodfl.name);
	    		var flid=foodfl.id;
	    		 axios.get('http://192.168.1.198/api/dishesListByCplxId?cplx_id='+flid).then((res) => {
				      this.foods = res.data;
				      console.log(this.foods)
				    })
	    		this.$nextTick(function () {
	　　　　　　　　this.foodfls.forEach(function (foodfl) {
	　　　　　　　　　　Vue.set(foodfl,'active',false);
	　　　　　　　　});
	　　　　　　　　Vue.set(foodfl,'active',true);
	　　　　　　});	
	    		console.log(this.listHeight[index]);
	    		document.body.scrollTop=this.listHeight[index];
				
	    	}
	    }
	}   